﻿<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
   <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Experimental CSS3 Animations for Image Transitions</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Experimental CSS3 Animations for Image Transitions" />
        <meta name="keywords" content="images, transition, animation, css3, jquery, 3d, 3d transform, webkit" />
        <meta name="author" content="Pedro Botelho for Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
		<script type="text/javascript" src="js/modernizr.custom.70748.js"></script>
    </head>
    <body>
        <div class="container">
			<div class="codrops-top">
                <a href="http://tympanus.net/Tutorials/ItemBlur/">
                    <strong>&laquo; Previous Demo: </strong>Item Blur Effect
                </a>
                <span class="right">
					<a href="http://www.behance.net/qstra" target="_blank">Images by Joanna Kustra</a>
                    <a href="http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div>
			<header>
				<h1>Experimental <span>CSS3</span> Animations <span>for (3D) Image Transitions <strong id="message">Webkit only!</strong></span></h1>
				<p class="codrops-demos">
					<a href="index.html">Flip</a>
					<a class="current-demo" href="index2.html">Rotation</a>
					<a href="index3.html">Multi-flip</a>
					<a href="index4.html">Cube</a>
					<a href="index5.html">Unfold</a>
					<a href="index6.html">Others</a>
				</p>
			</header>
			<div class="te-container">
				<div class="te-controls">
					<select id="type">
						<option value="te-rotation1">Rotation 1</option>
						<option value="te-rotation2">Rotation 2</option>
						<option value="te-rotation3">Rotation 3</option>
						<option value="te-rotation4">Rotation 4</option>
						<option value="te-rotation5">Rotation 5</option>
					</select>
					<a id="te-next" href="#" class="te-next">next</a>
					<div class="te-shadow"></div>
				</div>
				<div id="te-wrapper" class="te-wrapper">
					<div class="te-images">
						<img src="images/2.jpg"/>
						<img src="images/1.jpg"/>
						<img src="images/3.jpg"/>
						<img src="images/4.jpg"/>
						<img src="images/5.jpg"/>
					</div>
					<div class="te-cover">
						<img src="images/2.jpg"/>
					</div>
					<div class="te-transition">
						<div class="te-front"></div>
						<div class="te-back"></div>
					</div>
				</div>
			</div>
        </div>
        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
        <script src="js/googleapis.jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.transitions.js"></script>
		
		<script type="text/javascript" src="js/demo.js"></script>
    </body>
</html>